<template>
  <n-space class="security-space" vertical size="large">
    <n-layout has-sider>
      <n-layout-sider
        collapse-mode="width"
        :collapsed-width="0"
        :width="240"
        show-trigger="arrow-circle"
        content-style="padding: 0px 8px;"
        bordered
      >
        <p>
          <!-- <SysTbSecurityObjTree @select="onSelect"/> -->
          <SysTbSecurityObjMenu
            :menuList="dataObjMap"
            :loading="loading"
            @select="onSelect"
            @search="searchList"
          ></SysTbSecurityObjMenu>
        </p>
      </n-layout-sider>
      <n-layout-content content-style="padding: 0px;">
        <div class="ml-4">
          <n-alert style="margin-bottom: 15px;" v-if="isBatch" title="提示" type="warning"> 批量数据授权时，将清除用户原有数据授权，请谨慎操作！ </n-alert>
          <UserBindDataSecurityField
            v-model:user-id="queryForm.userId"
            ref="tableRef"
            v-model:fk-security-obj-id="queryForm.fkSecurityObjId"
            class="ml-4"
            :securityObj="securityObj"
            :isBatch="isBatch"
          />
        </div>
      </n-layout-content>
    </n-layout>
  </n-space>

  <!--    <n-grid cols="12">-->
  <!--&lt;!&ndash;      <n-grid-item :span="2">&ndash;&gt;-->
  <!--&lt;!&ndash;        <SysResourceMenuTree @select="onSelect" />&ndash;&gt;-->
  <!--&lt;!&ndash;      </n-grid-item>&ndash;&gt;-->
  <!--      <n-grid-item :span="10">-->
  <!--        <div class="ml-4">-->
  <!--          <sys-resource-elm-list ref="tableRef" :queryFormValue="queryForm" class="ml-4" />-->
  <!--        </div>-->
  <!--      </n-grid-item>-->
  <!--    </n-grid>-->
</template>

<script lang="ts" setup>
  import { defineComponent, onMounted, provide, ref } from 'vue';
  import {
    doDeleteModal,
    doSaveModal,
    doUpdateModal,
    onCheckedRowEvent,
    tableColumns,
    getAllDataPermission,
  } from '../Service';
  import SysTbSecurityObjTree from './SysTbSecurityObjTree.vue';
  import UserBindDataSecurityField from '@/views/AuthTbUser/UserBindDataSecurity/UserBindDataSecurityField.vue';
  import { string } from 'vue-types';
  import SysTbSecurityObjMenu from './SysTbSecurityObjMenu.vue';
  import { computed } from 'vue';
  import { isArray } from 'lodash';

  const props = defineProps({
    id: {
      type: [String, Array],
    },
  });
  const isBatch = computed(() => isArray(props.id));
  const dataObjMap = ref();
  const dataFieldMap = ref();
  provide('dataFieldMap', dataFieldMap);

  const queryForm = ref<any>({
    userId: props.id,
  });
  const tableRef = ref<any>();
  const securityObj = ref<any>();
  const loading = ref(false);

  const onSelect = async (row: any) => {
    // if (queryForm.value.fkSecurityObjId === row.id) {
    //   queryForm.value.fkSecurityObjId = ''
    // } else if (row.nodeType === 'obj') {
    //   queryForm.value.fkSecurityObjId = row.id;
    //   securityObj.value = row;
    // }
    console.log('unId', row.unId);
    queryForm.value.fkSecurityObjId = row.unId;
    securityObj.value = row;
    setTimeout(() => {
      reloadTable();
    }, 50);
  };

  function reloadTable() {
    tableRef.value.reloadTable();
  }

  const doUpdate = async () => {
    return tableRef.value.doUpdate();
  };

  async function init(searchKey?: string) {
    // 加载数据权限
    loading.value = true;
    const data = await getAllDataPermission(searchKey || '');
    dataObjMap.value = data.dataObjMap;
    dataFieldMap.value = data.dataFieldMap;
    loading.value = false;
  }

  async function searchList(val: string) {
    await init(val);
  }

  onMounted(async () => {
    await init();
  });

  defineExpose({
    doUpdate,
  });
</script>

<style lang="less" scoped>
  .security-space {
    height: 100%;
  }
</style>
